feat: add network tab to node page with peer connectivity visualization #2826

Copilot · 2025-09-04T06:53:37Z

Stand: https://nda.ya.ru/t/eafWrwwJ7NhqJT

This PR adds a Network tab to the individual node page, displaying connectivity data that helps users understand network topology and relationships between nodes.

Changes Made

New Network Tab

Added a "Network" tab to the node page (alongside Storage, Tablets, Threads tabs) that displays:
- Current node visualization on the left side
- Network peers connectivity on the right side
- Problem filtering capabilities to show all nodes or only problematic connections
- Toggle options for displaying node IDs and rack information

UI Components

Created NodeNetwork component that follows the same pattern as the database network tab
Reuses existing NodeNetwork component from the database diagnostics for consistent visualization
Integrates seamlessly with existing node page tab navigation
Shows current node and filters network data specifically for that node

Tab Configuration

Added "network" to NODE_TABS_IDS and NODE_TABS configuration
Updated node page routing to handle the network tab
Added network tab case to the renderTabContent switch in Node.tsx

Internationalization

Added network tab label following project i18n conventions:
- "Network" tab title

Technical Implementation

The implementation leverages the existing network API (networkApi.useGetNetworkInfoQuery) and filters the results to focus on the current node and its peers. The network tab uses the same visual components and interaction patterns as the database network tab, providing a consistent user experience.

The network information is fetched only when a tenant name is available, and the component gracefully handles cases where no network data or peers are found.

Visual Impact

The network tab provides users with:

Visual representation of the current node and its network peers
Interactive problem filtering to focus on connectivity issues
Consistent styling and behavior with other node page tabs
Clear separation between current node and peer nodes

This enhancement improves the monitoring and debugging experience for YDB cluster administrators by making network relationships more visible and accessible at the individual node level.

Fixes #2428.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
378	374	0	2	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: 🔺

Current: 66.06 MB | Main: 66.02 MB
Diff: +0.03 MB (0.05%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

## Key Changes

New Network Tab: Integrated network tab into node page with capability-based visibility (only shows when /viewer/peers handler is available)
Peer Network Table: Implemented paginated table showing peer nodes with columns for NodeId, Host, ClockSkew, PingTime, throughput, and bytes transferred
API Integration: Added getNodePeers method in ViewerAPI that calls /viewer/json/peers endpoint with filtering, sorting, and pagination support
Data Mapping: Implemented peer data mapper that calculates bidirectional clock skew and ping time metrics from Forward/Reverse peer states
Performance Optimizations: Properly memoized column configurations, filter objects, and callbacks per AGENTS.md requirements
Internationalization: All user-facing strings properly externalized to i18n files
Utility Enhancements: Extended bytesToMB and bytesToSpeed functions with optional precision parameter for consistent formatting

Technical Highlights

The implementation follows existing patterns consistently - reuses column definitions from nodesColumns, follows the same tab integration pattern as other node tabs (storage, tablets, threads), and uses proper capability checks to ensure backward compatibility with older YDB versions that don't support the peers endpoint.

Confidence Score: 5/5

This PR is safe to merge with minimal risk
The implementation is clean, well-structured, and follows all project conventions. Code properly handles edge cases (null checks, capability checks), uses memoization where required, implements proper i18n, and reuses existing patterns consistently. No logical errors, security issues, or performance concerns found.
No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
src/containers/Node/NodeNetwork/NodeNetwork.tsx	5/5	Added main network tab component with proper memoization and column filtering
src/containers/Node/Node.tsx	5/5	Integrated network tab into node page with capability-based visibility control
src/containers/Node/NodeNetwork/helpers/getNodePeers.ts	5/5	Added data fetching logic with proper API integration and sorting support
src/containers/Node/NodeNetwork/helpers/nodeNetworkMapper.ts	5/5	Implemented peer data mapping with clock skew and ping time calculations
src/services/api/viewer.ts	5/5	Added `getNodePeers` API method following existing patterns
src/types/api/peers.ts	5/5	Defined comprehensive types for peers API

Sequence Diagram

sequenceDiagram
    participant User
    participant NodePage as Node.tsx
    participant NodeNetwork as NodeNetwork.tsx
    participant NodeNetworkTable as NodeNetworkTable.tsx
    participant getNodePeers as getNodePeers.ts
    participant ViewerAPI as viewer.ts
    participant Backend as YDB Backend
    participant Mapper as nodeNetworkMapper.ts

    User->>NodePage: Navigate to Node page
    NodePage->>NodePage: Check capabilities (useViewerPeersHandlerAvailable)
    alt Peers handler available
        NodePage->>NodePage: Include network tab in nodeTabs
    else Not available
        NodePage->>NodePage: Skip network tab
    end
    
    User->>NodePage: Click Network tab
    NodePage->>NodeNetwork: Render NodeNetwork component
    NodeNetwork->>NodeNetwork: Setup columns with useMemo
    NodeNetwork->>NodeNetwork: Filter columns based on bridge mode
    NodeNetwork->>NodeNetworkTable: Render table with nodeId, searchValue, columns
    
    NodeNetworkTable->>NodeNetworkTable: Create filters with useMemo
    NodeNetworkTable->>getNodePeers: fetchData(params)
    getNodePeers->>getNodePeers: Extract nodeId, searchValue, sortParams
    getNodePeers->>getNodePeers: Map columnId to PeersSortValue
    getNodePeers->>ViewerAPI: getNodePeers({nodeId, filter, sort, limit, offset})
    ViewerAPI->>Backend: GET /viewer/json/peers
    Backend-->>ViewerAPI: TPeersResponse
    ViewerAPI-->>getNodePeers: TPeersResponse
    
    loop For each peer
        getNodePeers->>Mapper: mapPeerToNodeNetworkRow(peer)
        Mapper->>Mapper: Calculate ClockSkewUs = (fSkewUs - rSkewUs) / 2
        Mapper->>Mapper: Calculate PingTimeUs = (fPingUs + rPingUs) / 2
        Mapper-->>getNodePeers: NodePeerRow
    end
    
    getNodePeers-->>NodeNetworkTable: {data, found, total}
    NodeNetworkTable->>NodeNetworkTable: Update table state
    NodeNetworkTable-->>NodeNetwork: Display peer data
    NodeNetwork-->>NodePage: Render complete
    NodePage-->>User: Show network peers table

Co-authored-by: adameat <[email protected]>

adameat · 2025-09-12T04:15:44Z

@copilot no, you needed to add another tab on the node page. like storage, tablets, threads - there is should be a network tab, very similar to database's network tab. but with filter by current node.

Co-authored-by: adameat <[email protected]>

Copilot · 2025-09-12T04:25:28Z

@copilot no, you needed to add another tab on the node page. like storage, tablets, threads - there is should be a network tab, very similar to database's network tab. but with filter by current node.

You're absolutely right! I've corrected the implementation to add a proper "Network" tab to the node page (alongside Storage, Tablets, Threads tabs) instead of just adding network info to the node information panel.

The new Network tab shows:

Current node visualization on the left
Network peers connectivity on the right
Problem filtering capabilities
ID and Rack display options
Reuses existing network components for consistency

This matches the database network tab pattern but filtered specifically for the current node. Changes in commit d420599.

greptile-apps

_{2 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps

_{4 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

src/containers/Node/Network/NodeNetwork.tsx

greptile-apps

_{4 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps

Additional Comments (1)

src/containers/Node/Node.tsx, line 81-101 (link)

logic: network tab appears even when peers handler is unavailable - availability checks must be consistently applied to prevent tabs from appearing when features are not available

add network tab to skippedTabs when peers handler unavailable:

Context Used: Rule from dashboard - When adding config-related features, ensure availability checks using useConfigAvailable() are con... (source)

_{24 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx

Raubzeug · 2025-11-27T14:47:27Z

@greptile-review

greptile-apps

Additional Comments (1)

src/containers/Node/Node.tsx, line 81-101 (link)

logic: network tab should be conditionally hidden based on isPeersHandlerAvailable capability check. The check is declared on line 219 but used only in renderTabContent, not in tab list filtering logic.

Add this after line 93:
```
if (!isPeersHandlerAvailable) {
    skippedTabs.push('network');
}
```
Also add isPeersHandlerAvailable to useMemo dependencies on line 101.

Context Used: Rule from dashboard - When adding config-related features, ensure availability checks using useConfigAvailable() are con... (source)

_{24 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

greptile-apps

Additional Comments (1)

src/containers/Node/Node.tsx, line 81-94 (link)

logic: network tab should be hidden when /viewer/peers handler is not available, per custom rule a628e697 about applying availability checks consistently across all pages

Context Used: Rule from dashboard - When adding config-related features, ensure availability checks using useConfigAvailable() are con... (source)

_{24 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

Raubzeug · 2025-11-27T14:50:25Z

src/containers/Node/NodeNetwork/columns.ts

+        header: NODE_NETWORK_COLUMNS_TITLES.ConnectTime,
+        align: DataTable.LEFT,
+        width: 150,
+        resizeMinWidth: 120,


Please set it up so that the default width is enough to display without ellipsis.

Raubzeug · 2025-11-27T14:52:04Z

src/components/NetworkTable/NetworkTable.tsx

 type NetworkWrapperProps = Pick<
    NodesProps,
-    'path' | 'scrollContainerRef' | 'database' | 'databaseFullPath'
+    'path' | 'scrollContainerRef' | 'database' | 'databaseFullPath' | 'nodeId'


it seems no need to tune this component?

Raubzeug · 2025-11-27T14:55:38Z

src/containers/Node/Node.tsx

                return <Configs database={database} scrollContainerRef={parentContainer} />;
            }

+            case 'network': {


if not isPeersHandlerAvailable, there shouldn't be such a tab at all. Also if network is in url, we should redirect user to default tab and change url as well.

Raubzeug · 2025-11-27T15:02:05Z

src/containers/Nodes/NodesTable.tsx

    database?: string;
    databaseFullPath?: string;

+    nodeId?: string;


no need for changes in this component?

Raubzeug · 2025-11-27T15:02:15Z

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

    selectedColumnsKey: string;
    groupByParams: NodesGroupByField[];
    onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
+    nodeId?: string;


also no need?

Raubzeug · 2025-11-27T15:02:28Z

src/containers/Nodes/getNodes.ts

        peerRoleFilter,
        filterGroup,
        filterGroupBy,
+        nodeId,


Raubzeug · 2025-11-27T15:03:30Z

src/services/api/viewer.ts

+        {concurrentId, signal}: AxiosOptions = {},
+    ) {
+        return this.get<TPeersResponse>(
+            this.getPath('/viewer/json/peers?enums=true'),


lets add enums: true uniformly as query params

greptile-apps

_{17 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps

_{18 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

Initial plan

9a61fde

Copilot AI assigned Copilot and adameat Sep 4, 2025

Copilot started work on behalf of adameat September 4, 2025 06:53 View session

feat: add network peer information to node page

e96a344

Co-authored-by: adameat <[email protected]>

Copilot AI changed the title ~~[WIP] return node network information on node page~~ feat: add network peer information to node page Sep 4, 2025

Copilot AI requested a review from adameat September 4, 2025 07:16

Copilot finished work on behalf of adameat September 4, 2025 07:16

Copilot started work on behalf of adameat September 12, 2025 04:15 View session

feat: add network tab to node page with peer connectivity visualization

d420599

Co-authored-by: adameat <[email protected]>

Copilot AI changed the title ~~feat: add network peer information to node page~~ feat: add network tab to node page with peer connectivity visualization Sep 12, 2025

Copilot finished work on behalf of adameat September 12, 2025 04:26

greptile-apps bot reviewed Sep 15, 2025

View reviewed changes

greptile-apps bot reviewed Nov 1, 2025

View reviewed changes

src/containers/Node/Network/NodeNetwork.tsx Outdated Show resolved Hide resolved

src/containers/Node/Network/NodeNetwork.tsx Outdated Show resolved Hide resolved

src/containers/Node/Network/NodeNetwork.tsx Outdated Show resolved Hide resolved

greptile-apps bot reviewed Nov 12, 2025

View reviewed changes

DaryaVorontsova self-assigned this Nov 14, 2025

DaryaVorontsova and others added 12 commits November 14, 2025 12:26

Fix merge

bac3c4a

feat: add network tab to node page with peer connectivity visualization

4789b5a

Merge branch 'main' into copilot/fix-2428

931dbd3

Merge branch 'main' into copilot/fix-2428

3ea01db

Merge branch 'main' into copilot/fix-2428

aed1a96

Implement new visual

6e0088e

Merge branch 'main' into copilot/fix-2428

2d87248

Merge branch 'main' into copilot/fix-2428

c62468c

Merge branch 'main' into copilot/fix-2428

088c9f3

Fix bugs

2177317

Fix bugs

2b622a1

Fix bugs

8bfe94a

DaryaVorontsova marked this pull request as ready for review November 27, 2025 14:43

DaryaVorontsova requested review from Raubzeug, artemmufazalov and astandrik as code owners November 27, 2025 14:43

greptile-apps bot reviewed Nov 27, 2025

View reviewed changes

src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx Outdated Show resolved Hide resolved

src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx Outdated Show resolved Hide resolved

Raubzeug requested a review from Copilot November 27, 2025 14:47

Fix

12effdb

greptile-apps bot reviewed Nov 27, 2025

View reviewed changes

src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx Outdated Show resolved Hide resolved

src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx Outdated Show resolved Hide resolved

Fix i18n

68ae8dd

Copilot AI reviewed Nov 27, 2025

View reviewed changes

greptile-apps bot reviewed Nov 27, 2025

View reviewed changes

Raubzeug requested changes Nov 27, 2025

View reviewed changes

Copilot started reviewing on behalf of Raubzeug November 27, 2025 15:08 View session

Copilot finished reviewing on behalf of Raubzeug November 27, 2025 15:09

DaryaVorontsova added 2 commits November 27, 2025 19:20

Fix bugs

8dd9921

Fix

b8e7302

greptile-apps bot reviewed Nov 27, 2025

View reviewed changes

DaryaVorontsova requested a review from Raubzeug November 27, 2025 16:26

Raubzeug previously approved these changes Nov 28, 2025

View reviewed changes

Fix bugs

b606d54

DaryaVorontsova dismissed Raubzeug’s stale review via b606d54 November 28, 2025 08:36

DaryaVorontsova requested a review from Raubzeug November 28, 2025 08:37

greptile-apps bot reviewed Nov 28, 2025

View reviewed changes

Raubzeug approved these changes Nov 28, 2025

View reviewed changes

DaryaVorontsova added this pull request to the merge queue Nov 28, 2025

Merged via the queue into main with commit 6c307d8 Nov 28, 2025
9 checks passed

DaryaVorontsova deleted the copilot/fix-2428 branch November 28, 2025 09:09

ydb-platform-bot mentioned this pull request Nov 28, 2025

chore(main): release 12.23.0 #3138

Open

feat: add network tab to node page with peer connectivity visualization #2826

feat: add network tab to node page with peer connectivity visualization #2826

Uh oh!

Conversation

Copilot AI commented Sep 4, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

New Network Tab

UI Components

Tab Configuration

Internationalization

Technical Implementation

Visual Impact

CI Results

Test Status: ⚠️ FLAKY

⏭️ Skipped Tests (2)

Bundle Size: 🔺

Technical Highlights

Confidence Score: 5/5

Important Files Changed

Sequence Diagram

Uh oh!

adameat commented Sep 12, 2025

Uh oh!

Copilot AI commented Sep 12, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (1)

Uh oh!

Uh oh!

Uh oh!

Raubzeug commented Nov 27, 2025

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (1)

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (1)

Uh oh!

Raubzeug Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Raubzeug Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Raubzeug Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Raubzeug Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Raubzeug Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Raubzeug Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Sep 4, 2025 •

edited by github-actions bot

Loading

greptile-apps bot left a comment •

edited

Loading

greptile-apps bot left a comment •

edited

Loading

greptile-apps bot left a comment •

edited

Loading